<template>
    <a-modal  :width='800'
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk" 
    @cancel="handleCancel"
    >
    <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
      <a-form  :form='form'> 
        <a-row>
        <a-col  :span='12'> 
            <a-form-item label='用户名'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <a-input   v-decorator="['name' , baseInit.name   ]"  />
            </a-form-item>
            <a-form-item label='登录名'   :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <a-input   v-decorator="['loginName' , baseInit.loginName]"  />
            </a-form-item>
            <a-form-item label='登录密码' :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >

                <a-input   v-decorator="['loginPassword' , baseInit.loginPassword]"   v-if='!modalProps.isEdit || showPass'  type='password'>
                  <a-tooltip slot="suffix" title="取消"  v-if='showPass'  >
                      <a-icon  type="close-circle"  @click='showPass = false'/>
                  </a-tooltip>
                </a-input>
                <a-button  type='primary'  v-else  @click='showPass = true'> 修改 </a-button>

            </a-form-item>
            <a-form-item label='性别'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                 <a-radio-group name="radioGroup" v-decorator="['gender',baseInit.gender]" >
                    <a-radio value="0">女</a-radio>
                    <a-radio value="1">男</a-radio> 
                  </a-radio-group>
            </a-form-item>
            <a-form-item label='角色'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <a-select  mode="multiple"  v-decorator="['clientRoleList',baseInit.clientRoleList]">
                  <a-select-option  v-for='(item,index)  in  roleData'  :key='item.code'>{{item.name}}</a-select-option>
                </a-select>
            </a-form-item> 
            <a-form-item label='是否可用'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                 <a-radio-group   v-decorator="['useable',baseInit.useable]" >
                    <a-radio :value="1">可用</a-radio>
                    <a-radio :value="0">停用</a-radio> 
                  </a-radio-group>
            </a-form-item> 
        </a-col>
        <a-col  :span='12'> 
            <a-form-item label='手机'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <a-input   v-decorator="['mobile' , baseInit.mobile   ]"  />
            </a-form-item>
            <a-form-item label='email'   :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <a-input   v-decorator="['email' , baseInit.email]"  />
            </a-form-item>
            <a-form-item label='证件类型' :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <a-radio-group name="radioGroup"  v-decorator="['idType' , baseInit.idType]" >
                  <a-radio :value="1">身份证</a-radio>   
                  <a-radio :value="2">护照</a-radio>
                  <a-radio :value="3">军官证</a-radio> 
                </a-radio-group>

            </a-form-item>
            <a-form-item label='证件编号'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <a-input   v-decorator="['idNum' , baseInit.idNum ]"/>
            </a-form-item>
            <a-form-item label='证件有效期'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <!-- idValidityDate -->
                <a-date-picker   v-decorator="['idValidityDate' , baseInit.idValidityDate ]" />
            </a-form-item>
            <a-form-item   label='标签'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                <a-input    v-decorator="['tag' , baseInit.tag]"/>
            </a-form-item>
            <a-form-item  style='display: none;' >
                <a-input    v-decorator="['code' , baseInit.code]"/>
            </a-form-item>
        </a-col>
      </a-row>
      </a-form>
    </a-spin>
    </a-modal>
</template>

<script>
/*时间回填格式*/
import  moment  from  'moment'
import  {  submitAddUser , RoleList ,customerDetail  }  from  '@/api/system/index'
export default {
  name: 'customerModal',
  props:{
      visible:{
        type:Boolean,
        default:false
      }, 
  },
  data () {
    return {
      spinning:false,
      indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
      delayTime:500,
      //option 
      roleData:[],
      //edit是否显示修改密码
      showPass:false, 
      modalProps:{
          title:'',
          isEdit:false, /*表单进入状态*/
      },
      formLayout:{
        labelCol:{
          span:6
        },
        wrapperCol:{
          span:16
        }
      },
      /*form 初始值*/
      baseInit:{
        code:{initialValue:''},/*隐藏input里加上code*/ 
        name:{ initialValue :'' , rules : [{ required : true , message : '请输入用户名' }]},
        loginName:{ initialValue :'' , rules : [{ required : true , message : '请输入' }]},
        loginPassword:{ initialValue :'' , rules : [{ required : true , message : '请输入' }]},
        gender:{ initialValue:'1' },
        clientRoleList:{ initialValue:[],rules : [{ required : true , message : '请选择用户角色' }]},
        useable:{ initialValue:1 },

        mobile:{ initialValue :''},
        email:{ initialValue :''}, 
        idType:{ initialValue :''}, 
        idNum:{ initialValue :''}, 
        idValidityDate:{ initialValue :null}, 
        tag:{ initialValue :''}, 
      },
      
                                                                                      
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){
    this.roleList()
  },
  methods:{
    /*初始化数据*/
    roleList(){
      let url='/sys/client_role/get_client_role_list'//获取客户角色列表
      RoleList(url,{pageSize:200}).then((res)=>{
        this.roleData = res.data.dataList
      })
    },
    /*
      modal cancel&ok
    */
    handleCancel(e) {
      this.$emit('handleCancel') 
    },
    //submit
    handleOk(e) {
      let that = this
        this.form.validateFields((err, values) => {
          if (!err) {
            // console.log('Received values of form: ', values);
            let  url 
            values.clientRoleList = this.RequireCodeToSub(values.clientRoleList) 
            
            if(that.modalProps.isEdit == false){
                url ='/sys/client_user/create_client_user' //新增 客户用户
            }
            else{
              url = '/sys/client_user/modify_client_user' //修改 客户用户
            }
            this.spinning = true
            submitAddUser(url,values).then((res)=>{ 
              that.$message.info(res.data.msg)
              that.form.resetFields()
              that.$emit('handleOk')
              that.spinning = false
            })
            .catch((err)=>{ 
              that.spinning = false
            })
          }
          else{
            console.log(err)
          }
        });
    },
  },
 
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(){
        this.modalProps.isEdit = false
        this.modalProps.title = '添加用户'
        this.showPass =false
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = '' 
        this.baseInit.name.initialValue = ''
        this.baseInit.loginName.initialValue = ''
        this.baseInit.loginPassword.initialValue = ''
        this.baseInit.loginPassword.rules = [{required:true,message:'请输入'}]
        this.baseInit.useable.initialValue = 1

        this.baseInit.gender.initialValue = '1' 
        this.baseInit.clientRoleList.initialValue = []

         this.baseInit.mobile.initialValue = ''
         this.baseInit.email.initialValue = ''
         this.baseInit.idType.initialValue = ''
         this.baseInit.idNum.initialValue = ''
         this.baseInit.idValidityDate.initialValue = null
         this.baseInit.tag.initialValue = ''

      })
      this.$on('editDialog',async function(code){
        this.modalProps.isEdit = true
        this.modalProps.title = '编辑用户'

        this.showPass = false
        /*清空表单输入和校验*/
        this.form.resetFields()
        this.spinning = true
        await customerDetail(code).then((res)=>{
          // console.log(res.data)
          let data = res.data.data
            /*设置默认值*/
            this.baseInit.code.initialValue = data.code 
            this.baseInit.name.initialValue = data.name
            this.baseInit.loginName.initialValue = data.loginName
            this.baseInit.loginPassword.initialValue = ''
            this.baseInit.loginPassword.rules = [{required:false,message:''}]
            this.baseInit.gender.initialValue = data.gender
            this.baseInit.useable.initialValue = 1

            this.baseInit.mobile.initialValue = data.mobile
            this.baseInit.email.initialValue = data.email
            this.baseInit.idType.initialValue = data.idType
            this.baseInit.idNum.initialValue = data.idNum
            this.baseInit.idValidityDate.initialValue = data.idValidityDate ? moment(data.idValidityDate) : null
            this.baseInit.tag.initialValue = data.tag
 
            this.baseInit.clientRoleList.initialValue = this.Recontent_fromcode(data.clientRoleList)
             
            this.spinning = false
        })
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
